<template>
  <van-popup v-model="showSearch" position="right" :overlay="false" class="searchPopup">
    <div class="search-head-top">
      <div class="search-input">
        <form action="/">
          <van-search
            v-model="searchValue"
            placeholder="请输入搜索关键词"
            show-action
            background="#fff"
            @search="onSearch"
            @cancel="onCancel"
            id="searchRef"
          >
            <div slot="action" @click="onSearch" v-if="showSearchBtn" class="searchColor">搜索</div>
          </van-search>
        </form>
      </div>
    </div>
    <div class="search-head-bottom">
        <h4>热门搜索</h4>
        <ul class="clearfix">
            <li plain round v-for="(item,index) in hotTag" :key="index" class="hot-tag" @click="TagClick(item)">{{item}}</li>
        </ul>
    </div>
  </van-popup>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import { Search,Popup } from 'vant'
    export default {
      name: "SearchInput",
      components:{
        [Search.name]: Search,
        [Popup.name]: Popup,
      },
      mounted(){
        document.getElementById('searchRef').focus()
      },
      computed:{
        showSearchBtn:{
          get(){
            // console.log(document.getElementById('searchRef') === document.activeElement)
            if(this.searchValue && document.getElementById('searchRef') === document.activeElement){
              return true
            }else{
              return false
            }
          },
          set(){}
        },
      },
      data(){
        return {
          searchValue:'',
          hotTag:['糖尿病','甲状腺','痛风','高尿酸','高血压','1型糖尿病','2型糖尿病','高血脂'],
          showSearch:true,
        }
      },
      methods:{
        onSearch(){
          ajax.doAction({
            url:`/search?keyword=${this.searchValue}`,
            type: 'POST',
            successCallback:(data)=>{
              // console.log(data)
              let datas = data.data
              this.$router.push({
                path: '/search2',
                query: {
                  searchValue:this.searchValue
                }
              })
            },
            errorCallback: (data)=> {
              console.log('请求失败')
            }
          })
        },
        onCancel(){
          this.$router.push('/')
        },
        TagClick(itemVal){
          this.searchValue = itemVal
          document.getElementById('searchRef').focus()
        }
      }
    }
</script>

<style>
  .search-head-top{
    position: fixed;
    width: 100%;
    left: 0;
    top:0;
    background: #fff;
    z-index: 999;
  }
  .search-head-top .search-input{
    padding: 12px;
  }
  .search-head-top .search-input .van-search{
    padding: 0!important;
  }
  .search-head-top .search-input .van-search__content{
    background: none;
  }
  .search-head-top .search-input .van-search .van-cell{
    background-color: #F2F3F7;
    border-radius: 30px;
    padding: 3px 10px!important;
  }
  .search-head-top .search-input .van-search__action:active{
    background: none;
  }
  .search-head-top .searchColor{
    color: #0085ca;
  }
  .searchPopup{
    width: 100%;
    height: 100%;
  }
  .searchPopup .search-head-bottom{
    padding: 0 12px;
    padding-top: 70px;
  }
  .searchPopup .search-head-bottom h4{
    font-size: 15px;
    font-weight: normal;
  }
  .searchPopup .search-head-bottom .hot-tag{
    margin-right: 15px;
    margin-top: 10px;
    color: #A1A9C3;
    padding: 5px;
    float: left;
    font-size: 12px;
    border-radius: 30px;
    border:1px solid #E6E8F2
  }
</style>
